<template>
  <view class="content">
    <view class="TabView">
      <view class="TabView_item">
        <text :class="swiperIndex == 0?'Title1':'Title2'" @click="toDetection()">监测</text>
        <view :class="swiperIndex == 0?'TabsLine1':'TabsLine2'"></view>
      </view>
      <view class="TabView_item">
        <text :class="swiperIndex == 1?'Title1':'Title2'" @click="toTrend()">趋势</text>
        <view :class="swiperIndex == 1?'TabsLine1':'TabsLine2'"></view>
      </view>
    </view>
    <!-- swiper 切换 -->
    <view class="swiperView">
      <swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="400" :current="swiperIndex"
              @change="changeItem" style="height: 100%;">
        <swiper-item>

          <!-- 检测页内容 -->
          <view style="overflow: auto;height: 100%;">
            <view class="flex-c" style="width: 100%;height: 100%;">
              <!-- 无网络的提示 -->
              <image v-show="!isNet" class="NetState" src="../../static/image/img_noNet.png" mode="">
              </image>
              <view class="HeadBandImgView flex-c">
                <image :animation="animationData" src="../../static/image/detection/headband.png"
                       mode="widthFix" class="HeadBandImg"></image>
              </view>
              <view id="detePage" class="absoultView flex-c">
                <view class="DisplayArea flex-c">
                  <!-- 未连接状态 -->
                  <view v-if="!isConnected" class="ConnectBtn flex-c" @click="toConnectBluetooth()">
                    <view>
                      <text v-text="ConnectBtnText"></text>
                      <text class="loading_dot" v-show="ConnectBtnText == '连接中'">...</text>
                    </view>
                  </view>
                  <!-- 已连接状态  状态栏  显示-->
                  <view class="StatusBar" v-else>
                    <view class="StatusBar_item"
                          style="width:150rpx;padding: 5rpx;border-radius: 12px; background-color: #e7e7e7;"
                          @click="disBleConnect()">
                      <image src="../../static/image/detection/disConnect.png"
                             style="width: 46rpx;height: 42rpx;"></image>
                      <text class="StatusBar_item_Des">断开连接</text>
                    </view>
                    <view style="width: 2rpx;height: 60rpx;background-color: #E6E6E6;"></view>
                    <view class="StatusBar_item">
                      <image v-if="!isAdorn" src="../../static/image/detection/notadorn.png"
                             style="width: 52rpx;height: 39rpx;"></image>
                      <image v-else src="../../static/image/detection/adorn.png"
                             style="width: 52rpx;height: 39rpx;"></image>
                      <text v-if="!isAdorn" class="StatusBar_item_Des noAdorn">未佩戴</text>
                      <text v-else class="StatusBar_item_Des">已佩戴</text>
                    </view>
                    <view style="width: 2rpx;height: 60rpx;background-color: #E6E6E6;"></view>
                    <view class="StatusBar_item">
                      <text class="power">{{ power }}%</text>
                      <text class="StatusBar_item_Des">头环电量</text>
                    </view>
                  </view>
                </view>
                <!-- 底部4个卡片区域 -->
                <image class="card_img" src="../../static/image/detection/img_fastMonitor.png"
                       style="margin-top: 27rpx;width: 664rpx;height: 167rpx;" @click="toFastMonitor()">
                </image>
                <image class="card_img" src="../../static/image/detection/img_deepMonitor.png"
                       style="width: 664rpx;height: 167rpx;" @click="toDeepMonitor()"></image>
                <view style="display: flex;">
                  <image class="card_img" src="../../static/image/detection/img_historyReport.png"
                         style="width: 320rpx;height: 255rpx;" @click="toHistoryReport()"></image>
                  <image class="card_img" src="../../static/image/detection/img_dataExplain.png"
                         style="margin-left: 24rpx; width: 320rpx;height: 255rpx;margin-bottom: 22rpx;"
                         @click="toIntroductDetail()"></image>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <!-- 趋势页内容 -->
          <view style="overflow: auto;height: 100%;">
            <view class="TendArea">
              <view v-if="!isHistoryData" style="margin-top: 300rpx;">
                <image src="../../static/image/detection/img_nodata.png"
                       style="width: 424rpx;height: 409rpx;"></image>
              </view>
              <view v-if="isHistoryData" class="content">
                <view class="chartArea flex-c">
                  <view class="selectDateView">
                    <view class="selectDateBtn flex-c" :style="{ background: selectDateBtnBg1 }"
                          @click="SelectDate(7)">7日
                    </view>
                    <view class="selectDateBtn flex-c" :style="{ background: selectDateBtnBg2 }"
                          @click="SelectDate(15)">15日
                    </view>
                    <view class="selectDateBtn flex-c" :style="{ background: selectDateBtnBg3 }"
                          @click="SelectDate(30)">30日
                    </view>
                    <view class="selectDateBtn flex-c" :style="{ background: selectDateBtnBg4 }"
                          @click="SelectDate(60)">60日
                    </view>
                  </view>
                  <!-- 柱状图 区域 -->
                  <view class="charts-box" @touchmove.stop.prevent="moveHandle">
                    <qiun-data-charts type="column" :chartData="chartData" :errorReload="false"
                                      :echartsH5="false" :echartsApp="false" background="none" :tapLegend="false"
                                      :ontouch="true" @getIndex="getChartIndex"/>
                  </view>
                </view>

                <view class="reportDataView">
                  <image class="reportDataViewImg"
                         src="../../static/image/detection/icon_trendTip.png" mode="widthFix"></image>
                  <view class="reportDataView_T" style="margin-top: 100rpx;">
                    <view class="reportData_top" style="margin-left: 50rpx;">
                      <text>健康检测:</text>
                      <text>{{ healthyCount }}</text>
                      <text>次</text>
                    </view>
                    <view class="reportData_top" style="margin-right: 50rpx;">
                      <text>心率:</text>
                      <text>{{ trendReport.heartRate }}</text>
                      <text>次/分</text>
                    </view>
                  </view>
                  <view class="line"></view>
                  <view class="reportDataView_T mt28">
                    <view class="reportDataItem flex-c">
                      <text class="reportDataItem_name">血管年龄</text>
                      <view class="reportDataItem_des flex-c">{{ trendReport.bloodAge }}</view>
                    </view>
                    <view class="reportDataItem flex-c">
                      <text class="reportDataItem_name">血流波动</text>
                      <view class="reportDataItem_des flex-c">{{ trendReport.headhealth }}</view>
                    </view>
                    <view class="reportDataItem flex-c">
                      <text class="reportDataItem_name">血管弹性</text>
                      <view class="reportDataItem_des flex-c">{{ trendReport.bloodElasticity }}
                      </view>
                    </view>
                    <view class="reportDataItem flex-c">
                      <text class="reportDataItem_name">调节能力</text>
                      <view class="reportDataItem_des flex-c">{{ trendReport.bloodAdjust }}</view>
                    </view>
                  </view>
                </view>
                <view style="display: none;">
                  <view class="LifeAdvice mt45">
                    <view class="tipView">
                      <view class="tipLine ml28" style="background-color: #1BC91A;"></view>
                      <text class="LifeAdvice_title" style="margin-left: 18rpx;">生活建议</text>
                    </view>
                    <view class="mt45" style="margin-left: 56rpx;">
                      <text
                          class="LifeAdvice_content">{{ lifeAdvice.description.slice(0, 55) }}...
                      </text>
                      <text class="LookDetailText" @click="toLifeDetail()">查看详情</text>
                    </view>
                  </view>

                  <view class="LifeAdvice mt45">
                    <view class="tipView">
                      <view class="tipLine ml28"></view>
                      <text class="LifeAdvice_title" style="margin-left: 18rpx;">饮食建议</text>
                    </view>
                    <view class="mt45" style="margin-left: 56rpx;">
                      <text
                          class="LifeAdvice_content">{{ dietAdvice.description.slice(0, 55) }}...
                      </text>
                      <text class="LookDetailText" @click="toDietDetail()">查看详情</text>
                    </view>
                  </view>

                  <!-- 饮食建议 -->
                  <view class="card3">
                    <view class="card3_item1">
                      <view class="card3_item1_time flex-c">
                        <text class="card3_item1_time_T1">早餐</text>
                        <text class="card3_item1_time_T2">ZAO CAN</text>
                      </view>
                      <view class="card3_item1_food flex-c ML33"
                            v-for="(item, index) in breakfast" :key="index">
                        <image :src="item.accessUrl"></image>
                        <text>{{ item.description }}</text>
                      </view>
                    </view>
                    <view class="card3_item1">
                      <view class="card3_item1_time flex-c">
                        <text class="card3_item1_time_T1">午餐</text>
                        <text class="card3_item1_time_T2">WU CAN</text>
                      </view>
                      <view class="card3_item1_food flex-c ML33" v-for="(item, index) in lunch"
                            :key="index">
                        <image :src="item.accessUrl"></image>
                        <text>{{ item.description }}</text>
                      </view>
                    </view>
                    <view class="card3_item1">
                      <view class="card3_item1_time flex-c">
                        <text class="card3_item1_time_T1">晚餐</text>
                        <text class="card3_item1_time_T2">WAN CAN</text>
                      </view>
                      <view class="card3_item1_food flex-c ML33" v-for="(item, index) in dinner"
                            :key="index">
                        <image :src="item.accessUrl"></image>
                        <text>{{ item.description }}</text>
                      </view>
                    </view>
                  </view>
                  <!-- 菜谱 -->
                  <view class="card_cookBook">
                    <view class="card_cookBook_item" v-for="(item, index) in menu" :key="index">
                      <image :src="item.image"></image>
                      <view class="card_cookBook_item_R">
                        <text class="card_cookBook_item_RT_text">{{ item.title }}</text>
                        <view style="margin-top: 10rpx;">
                          <text
                              class="LifeAdvice_content">{{ item.description.slice(0, 20) }}...
                          </text>
                          <text class="LookDetailText"
                                @click="toMenuDetail(index)">查看详情
                          </text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 运动建议 -->
                  <view class="LifeAdvice mt45">
                    <view class="tipView">
                      <view class="tipLine ml28"></view>
                      <text class="LifeAdvice_title" style="margin-left: 18rpx;">运动建议</text>
                    </view>
                    <view class="mt45" style="margin-left: 56rpx;">
                      <text
                          class="LifeAdvice_content">{{ sportAdvice.description.slice(0, 55) }}...
                      </text>
                      <text class="LookDetailText" @click="toSportDetail()">查看详情</text>
                    </view>
                  </view>
                  <scroll-view class="scroll-view_row" scroll-x="true" scroll-left="120"
                               show-scrollbar="false">
                    <view class="scroll-view_item" v-for="(item, index) in sportDetail" :key="index"
                          @click="toSportCardDetail(index)">
                      <image :src="item.image" mode=""></image>
                      <view class="scroll-view_item_view">
                        <text>{{ item.description.slice(0, 15) }}</text>
                      </view>
                    </view>
                  </scroll-view>
                  <view class="card_bottom">
                    <view class="card_bottom_L">
                      <view
                          style="width: 10rpx;height: 30rpx;background-color: #F5212D;border-radius: 50px;">
                      </view>
                      <text
                          style="font-size: 40rpx;font-family: Source Han Sans CN;font-weight: bold;color: #000000;margin-left: 17rpx;">
                        药膳
                      </text>
                      <view
                          style="width: 5rpx;height: 37rpx;background-color: #000000;border-radius: 50px;margin-left: 17rpx;">
                      </view>
                      <text
                          style="font-size: 38rpx;font-family: Source Han Sans CN;font-weight: normal;color: #000000;margin-left: 23rpx;">
                        {{ tonicDiet.title }}
                      </text>
                    </view>
                    <image src="../../static/image/suggest/icon_look_red.png"
                           style="width: 130rpx;height: 53rpx;margin-right: 30rpx;"
                           @click="toTonicDietDetail()"></image>
                  </view>
                </view>

              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 弹出层 -->
    <!-- 蓝牙适配器未开启 -->
    <uni-popup ref="popup1" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_close" src="../../static/image/icon_close.png" @click="closePopup()"></image>
        <image class="icon_content" src="../../static/image/detection/icon_bluetooth.png"></image>
        <view class="flex-c">
          <text class="popup1Content">连接失败</text>
          <text class="popup1Content">未打开蓝牙开关</text>
        </view>
        <view class="popupBottomView flex-c" @click="tryOpBluetoothAdapter()">
          <text>授权打开</text>
        </view>
      </view>
    </uni-popup>
    <!-- 头环未开机 没找到EI的设备 -->
    <uni-popup ref="popup2" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_close" src="../../static/image/icon_close.png" @click="closePopup()"></image>
        <image class="icon_content" src="../../static/image/detection/icon_open.png"></image>
        <view class="flex-c">
          <text class="popup1Content">连接失败</text>
          <text class="popup1Content">检查头环是否开机</text>
        </view>
        <view class="popupBottomView flex-c" @click="IKnow()">
          <text>我知道了</text>
        </view>
      </view>
    </uni-popup>

    <!-- 和头环连接中断 -->
    <uni-popup ref="popup3" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_close" src="../../static/image/icon_close.png" @click="closePopup()"></image>
        <image class="icon_content" src="../../static/image/detection/icon_open.png"></image>
        <view class="flex-c">
          <text class="popup1Content">长时间未操作头环</text>
          <text class="popup1Content">{{ belDeviceState }}</text>
        </view>
        <view class="popupBottomView flex-c" @click="IKnow1()">
          <text>我知道了</text>
        </view>
      </view>
    </uni-popup>
    <!-- power low Warning -->
    <uni-popup ref="powerPopup" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_close" src="../../static/image/icon_close.png" @click="closePopup()"></image>
        <image class="icon_content" src="../../static/image/detection/icon_power.png"></image>
        <view class="flex-c">
          <text class="popup1Content">头环电量低</text>
          <text class="popup1Content">请您及时充电</text>
        </view>
        <view class="popupBottomView flex-c" @click="IKnow2()">
          <text>我知道了</text>
        </view>
      </view>
    </uni-popup>
    <!-- 固件升级弹窗 -->
    <uni-popup ref="updatePopup" :mask-click="false" :safe-area="false" type="dialog">
      <view class="dfuPopup">
        <view class="flex-c">
          <image class="updateImg" src="../../static/image/img_update.png" mode="widthFix"></image>
          <text style="margin-top: 20rpx;">检测到新固件</text>
        </view>
        <view class="dfu_des">
          <text>升级说明:</text>
          <text>{{ updateDescription }}</text>
          <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
        </view>
        <view class="dfu_button flex-c" @click="toUpdate()">
          <text>立即升级</text>
        </view>
      </view>
      <!-- <view class="flex-c" style="width: 530rpx;">
        <image src="../../static/image/report/icon_close.png"
          style="width: 71rpx;height: 72rpx;margin: 29rpx auto auto;" @click="closePopup()"></image>
      </view> -->
    </uni-popup>
  </view>
</template>

<script>
import {uploadLocation} from "../../api/login";

const app = getApp();
import store from '../../store/index.js';
import * as api from '@/api/login';
import util from '../../utils/utils.js';
import {
  mapState
} from 'vuex'; //引入mapState
export default {
  data() {
    return {
      // 临时
      Name: '',
      Age: '',
      swiperIndex: 0, //...
      isToConnect: false, //是否去主动连接蓝牙
      ConnectBtnText: '连接头环', //连接按钮上的文字
      isClick: true, //按钮是否可以点击
      buffer: [], //从蓝牙接收来的原始数据
      recvBuffer: [],
      power: 0, //电量
      isAdorn: false, //头环是否佩戴
      isDevice: null, //是否有EI的设备
      isMonitor: false, //是否可以检测
      animationData: {}, //动画
      operationTimer: null, //未操作头环断开连接定时器
      belDeviceState: '连接已断开',
      // 趋势页变量
      selectDateBtnBg1: '#e5e5e5',
      selectDateBtnBg2: '',
      selectDateBtnBg3: '',
      selectDateBtnBg4: '',
      trendData: [],
      choiceTrendData: [],
      // 图表配置
      // padding:[10,10,10,100],
      chartData: {
        categories: [],
        series: [{
          name: '分数',
          data: []
        }]
      },
      SuggestContent: '',
      // 健康报告相关参数
      healthyCount: 0,
      isHistoryData: true, //是否有历史数据
      userId: '',
      keyWord: '', //关键词
      // 生活建议
      lifeAdvice: {
        description: '',
        accessUrl: ''
      },
      // 饮食建议
      dietAdvice: {
        description: '',
        accessUrl: ''
      },
      // 运动建议
      sportAdvice: {
        description: '',
        accessUrl: ''
      },
      // 运动详情
      sportDetail: [],
      // 药膳
      tonicDiet: {
        title: '',
        accessUrl: ''
      },
      // 早餐
      breakfast: {},
      lunch: {},
      dinner: {},
      // 菜谱
      menu: [],
      // move tab 滑动
      moveTab: {
        clientX: null,
        clientY: null,
        touchStartTime: null
      },
      updateDescription: '', //固件升级描述
      trendReport: {
        heartRate: 0,
        bloodAge: '--',
        bloodAdjust: '--',
        bloodElasticity: '--',
        headhealth: '--'
      },
      loopRequestAdornStateTimer: null,
      loopRequestCount: 0,
    };
  },
  // 引用 store中的变量
  computed: {
    ...mapState({
      isNet: function (state) {
        return state.isNet;
      },
      isConnected: function (state) {
        return state.isConnected;
      },
      isEiDevice: state => state.isEiDevice,
      isBluetoothAdapter: state => state.isBluetoothAdapter
    })
  },
  // 监听本地数据变化
  watch: {
    // 监听蓝牙适配器状态
    isBluetoothAdapter: {
      handler(newValue, oldValue) {
        console.log('适配器状态' + newValue);
        if (!newValue) {
          this.$refs.popup1.open('center');
        } else {
          this.$refs.popup1.close();
        }
      }
    },
    // 监听是否存在EI的设备
    isEiDevice: {
      handler(newValue, oldValue) {
        if (!newValue) {
          this.$refs.popup2.open('center');
        }
      }
    },
    // 监听蓝牙连接状态
    isConnected: {
      handler(newValue, oldValue) {
        console.log(newValue);
        if (!newValue) {
          if (!store.state.isDFU) {
            if (!store.state.isActiveDisConnect) {
              app.deteDeviceState(true);
              let that = this;
              uni.$once('ble-device-state', function (data) {
                console.log('dataMsg', data);
                that.belDeviceState = data.msg;
                that.$refs.popup3.open('center');
                app.globalData.isDeteDeviceState = false;
              })
            } else {
              this.$toast('您已断开连接');
            }
            this.isMonitor = false;
            this.ConnectBtnText = '连接设备';
            this.isClick = true;
            clearInterval(this.operationTimer);
            app.globalData.notOperatedCount = 0;
          }
          this.isAdorn = false;
          this.$refs.updatePopup.close();
          this.$refs.powerPopup.close();
        } else {
          this.$refs.popup3.close();
          store.commit('isActiveDisConnect', false)
          this.isMonitor = true;
          this.loopDete()
        }
      }
    }
  },
  onLoad() {
    this.userId = store.state.userInfo.currentUser.userId;
    this.getUserModel();
    let that = this;
    uni.$on('originalData', function (data) {
      let array = Array.prototype.slice.call(new Uint8Array(data.msg));
      console.log("array", array)
      that.recvPackage(array)
    });

    this.getUserLocation()
  },
  onShow() {
    var animation = uni.createAnimation({
      transformOrigin: '50% 50%',
      duration: 500,
      timingFunction: 'linear'
    });
    animation.scale(1.25, 1.25).step();
    this.animationData = animation.export();
    store.commit('isLoopCheckConnectState', true)
  },
  onHide() {
    console.log('detection hide');
  },
  methods: {
    // 获取当前用户的位置/上传用户位置信息
    async getUserLocation() {
      let that = this
      uni.getLocation({
        type: 'wgs84',
        success: async (res) => {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          let obj = {
            userId: this.userId,
            params: {
              lon: res.longitude,
              lat: res.latitude
            }
          }
          // 上传用户位置信息
          let res2 = await uploadLocation(obj)
          console.log("res2", res2)
          // uploadLocation()
        }
      });
    },


    // 授权开启蓝牙适配器
    tryOpBluetoothAdapter() {
      store.commit('BluetoothAdapterState', true);
      this.$refs.popup1.close();
      this.$utils.requestOpenBluetooth();
      this.ConnectBtnText = '连接头环';
      this.isClick = true;
    },
    //循环检测是否操作头环（超时未操作则断开连接）
    loopDete() {
      let that = this
      that.operationTimer = setInterval(function () {
        if (app.globalData.notOperatedCount >= 25) {
          clearInterval(that.operationTimer)
          console.log('主动断开连接了');
          app.closeBLEConnection()
          app.globalData.notOperatedCount = 0
        } else {
          if (store.state.isLoopCheckConnectState && !that.isAdorn) {
            app.globalData.notOperatedCount++
          }
          if (that.isAdorn) {
            app.globalData.notOperatedCount = 0
          }
        }

        console.log("进入循环了")
      }, 5000)
    },
    // 无设备的响应
    IKnow() {
      store.commit('isEiDevice', true);
      this.$refs.popup2.close();
      this.ConnectBtnText = '连接头环';
      this.isClick = true;
    },
    // 断开的响应
    IKnow1() {
      this.$refs.popup3.close();
      this.ConnectBtnText = '连接头环';
      this.isClick = true;
    },
    // 断开的响应
    IKnow2() {
      this.$refs.powerPopup.close();
    },
    // 关闭弹窗
    closePopup: function () {
      this.$refs.popup1.close();
      this.$refs.popup2.close();
      this.$refs.popup3.close();
      this.$refs.updatePopup.close();
      this.$refs.powerPopup.close();
    },
    Cancel() {
      this.$refs.popup.close();
      this.ConnectBtnText = '连接头环';
      this.isClick = true;
    },
    Enter() {
      console.log('获取的值::' + this.Name + this.Age);
      this.$refs.popup.close();
    },
    // 连接蓝牙
    toConnectBluetooth: function () {
      let that = this;
      if (this.isClick) {
        this.ConnectBtnText = '连接中';
        this.isClick = false;
        // store.commit('isEiDevice', true);
        // 清空设备列表
        app.globalData.devices = [];
        app.openBluetoothAdapter();
        let timer = setTimeout(function () {
          if (!that.isMonitor) {
            console.log('延时---')
            clearTimeout(timer)
            that.ConnectBtnText = '连接头环'
            that.isClick = true
          }
        }, 8000);
      }
    },
    //主动断开蓝牙连接
    disBleConnect() {
      clearInterval(this.loopRequestAdornStateTimer);
      app.closeBLEConnection()
    },
    //获取健康模型的数据
    getUserModel() {
      // 请求健康模型
      let that = this
      let data = {
        userId: this.userId,
        action: 'getUserModel'
      };
      api.getUserModel(data).then(function (res) {
        console.log('请求健康模型 ', res);
        that.$store.commit('isBuildModel', res.data.success)
      }).catch(function (error) {
        console.log('get getUserModel fail', error);
      });
    },
    // 进入快速检测页面
    toFastMonitor() {
      // 监听 检测（监测）返回的是否弹窗的事件
      let that = this;
      uni.$once('alreadyPopup', function (data) {
        if (data) that.$refs.popup3.close();
      });
      // 设置只有蓝牙连接后才可以去检测
      if (this.isMonitor) {
        if (!this.isAdorn) {
          this.$toast('请检查头环佩戴情况')
          return;
        }
        store.commit('isLoopCheckConnectState', false);
        store.commit('isLoopCheckAdornState', false);
        uni.navigateTo({
          url: 'fastMonitor/fastMonitor'
        });
      } else {
        this.$toast('蓝牙未连接', {
          icon: 'error'
        });
      }
    },
    // 深度检测
    toDeepMonitor() {
      // 监听 检测（监测）返回的是否弹窗的事件
      let that = this;
      uni.$once('alreadyPopup', function (data) {
        if (data) that.$refs.popup3.close();
      });
      if (this.isMonitor) {
        if (!this.isAdorn) {
          this.$toast('请检查头环佩戴情况');
          return;
        }
        store.commit('isLoopCheckAdornState', false);
        uni.navigateTo({
          url: 'deepMonitor/deepMonitor'
        });
      } else {
        this.$toast('蓝牙未连接', {
          icon: 'error'
        });
      }
    },
    // 历史报告
    toHistoryReport: function () {
      uni.navigateTo({
        url: 'historyReport/historyReport'
      });
    },
    //处理监听到的数据
    async recvPackage(array) {
      try {
        this.recvBuffer.push(...array);
        while (array.length >= 7) {
          let retVal = await this.checkPackage();
          if (retVal) {
            this.checkFormat(retVal);
          } else {
            break;
          }
        }
      } catch (e) {
        console.error('recvPage error>', e);
      }
    },
    //接收完整报文数据
    checkPackage() {
      return new Promise((resolve) => {
        let buffer = this.recvBuffer;
        for (let i = 0; i < buffer.length; i++) {
          if (buffer[i] === 0x68) {
            let lenBytes = [buffer[i + 1], buffer[i + 2]];
            let packLen = this.$utils.BytesToIntBigEndian(lenBytes);
            if (packLen + i <= buffer.length) {
              if (buffer[i + packLen - 1] === 0x16) {
                let crcContent = buffer.slice(i + 1, i + packLen - 3);
                let crc16 = this.$utils.crc16_false(crcContent);
                if (buffer[i + packLen - 3] === crc16[0] && buffer[i + packLen - 2] === crc16[1]) {
                  let totalData = buffer.splice(i, packLen);
                  return resolve(totalData);
                }
              }
            }
          }
        }
      })
    },
    checkFormat(array) {
      if (array[3] === 0x06) this.power = array[4];
      if (array[3] === 0x10) {
        this.checkVersion(`${array[7]}.${array[8]}.${array[9]}`);
        store.commit('firmwareVersion', `${array[7]}.${array[8]}.${array[9]}`);
      }
      if (array[3] === 0x20) {
        let body = array.slice(4, 20);
        let str = "";
        body.forEach((item) => {
          str += item.toString(16);
        })
        this.getServiceInfo(this.$utils.hexToString(str));
      }
      if (array[3] === 0x29) this.checkAdornState(array);
      if (array[3] === 0xFF) {
        console.log('回执信号...', array[4].toString(16));
        store.commit('isReceipt', true);
      }
    },
    checkAdornState(array) {
      let decode_front = array.slice(4, -3)
      let decode_later = this.$utils.Data_Decrypt(decode_front, decode_front.length)
      let fixL = this.$utils.convertFloat(decode_later.slice(0, 4).reverse()).toFixed(2)
      let fixR = this.$utils.convertFloat(decode_later.slice(4, 8).reverse()).toFixed(2)
      if ((fixL > 1000 || fixL < 0) || (fixR > 1000 || fixR < 0)) {
        this.isAdorn = false;
      } else {
        this.isAdorn = true;
      }
    },
    // 获取服务信息
    getServiceInfo(id) {
      let that = this;
      let data = {
        userId: that.userId,
        action: 'getServiceInfo'
      };
      console.log('id........' + id);
      api.getServiceInfo(data)
          .then(async function (res) {
            console.log('res', res);
            if (res.data.code === 2000) {
              if (res.data.message == '该用户未绑定服务') {
                let erpToken = await app.getErpToken()
                console.log('erpToken>>>' + erpToken);
                if (erpToken) {
                  that.getCardInfo(erpToken, id)
                }
              } else if (res.data.data.productId == "" || res.data.data.productId == null) {
                that.changeServiceProductId(id)
              } else if (res.data.data.productId !== id) {
                console.log('不相同');
                that.userDeviceIdError(id, res.data.data.productId)
              }
            }
          })
          .catch(function (error) {
            console.log('getServiceInfo fail', error);
          });
    },
    //当用户已有服务后 产品ID为空时，调用更换产品接口
    changeServiceProductId(id) {
      let that = this;
      let data = {
        userId: that.userId,
        action: '',
        params: id
      };
      api.changeServiceProductId(data).then(async function (res) {
        console.log('changeServiceProductId success', res);
        if (res.data.code === 2000) {

        }
      }).catch(function (error) {
        console.log('changeServiceProductId fail', error);
      });
    },
    getCardInfo(erpToken, id) {
      let that = this
      uni.request({
        url: that.$config.HttpUrl + '/service-product-management/inner/productManagement',
        method: 'POST',
        header: {
          token: erpToken
        },
        data: {
          action: 'get',
          params: {
            id,
          }
        },
        success(res) {
          console.log('productManagement success', res)
          if (res.data.code === 2000) {
            that.bindService(res.data.data.product.cardId)
          } else if (res.data.code === 2001) {
            that.$toast(res.data.message)
          }
        },
        fail(err) {
          console.log('productManagement fail', err);
        }
      });
    },
    // 绑定服务
    bindService(cardId) {
      let that = this;
      let data = {
        action: 'bindService',
        userId: this.userId,
        params: {
          cardId,
        }
      };
      api.bindService(data).then(function (res) {
        console.log('bind head success!!', res);
        if (res.data.code == 2000) {
          if (res.data.message == '该设备的服务账户绑定用户数量已满') {
            that.$toast('今日绑定用户数量已满', {
              icon: 'none'
            });
            app.closeBLEConnection()
            return;
          }
        } else {
          that.$toast('头环绑定失败,请联系客服人员', {
            icon: 'none',
            duration: 5000
          });
          app.closeBLEConnection()
          return;
        }
      }).catch(function (error) {
        app.closeBLEConnection()
        console.log('bindService fail', error);
      });
    },
    //上报用户 设备不符合的情况
    userDeviceIdError(realId, serviceDeviceId) {
      let that = this;
      let data = {
        userId: that.userId,
        action: 'report',
        params: {
          realId,
          serviceDeviceId
        }
      };
      console.log('data', data);
      api.userDeviceIdError(data).then(function (res) {
        console.log('userDeviceIdError res', res);
      }).catch(function (error) {
        console.log('userDeviceIdError fail', error);
      });
    },
    // 检测 版本是否 一致
    checkVersion(deviceVersion) {
      let that = this;
      uni.request({
        url: 'https://xch.jseihc.com/public/platform/headband_dfu_packet/versionNumber.html',
        success(res) {
          console.log('version success:', res);
          if (res.statusCode === 200) {
            that.updateDescription = res.data.description;
            let compRes = that.$utils.compareVersion(res.data.version, deviceVersion);
            console.log('compRes>>', compRes);
            if (compRes == 1) {
              let t = setTimeout(() => {
                clearTimeout(t)
                that.$refs.updatePopup.open('center');
              }, 1200)
            } else {
              that.sendOther();
            }
          }
        },
        fail(e) {
          console.log('version fail:', e);
        }
      });
    },
    // 当不需要更新固件版本时 发送其他指令
    sendOther() {
      console.log('发送剩余指令');
      this.loopRequestAdornState();
      let t = setTimeout(async () => {
        clearTimeout(t);
        let array = [15, 20, 29];
        while (array.length > 0) {
          try {
            let ret = await app.writeBLEState(array[0]);
            if (ret) {
              array.shift();
            } else {
              return;
            }
          } catch (e) {
            //TODO handle the exception
            console.log('catch eee', e);
            return;
          }
        }
      }, 1000);
    },
    //获取头环佩戴状态/电量的轮询 由定时器切换更改成状态控制
    loopRequestAdornState() {
      this.loopRequestAdornStateTimer = setInterval(() => {
        if (store.state.isLoopCheckAdornState) {
          this.loopRequestCount++;
          if (this.loopRequestCount % 36 === 0) {
            app.writeBLEState(15);
          } else {
            app.writeBLEState(29);
          }
        }
      }, 5000)
    },
    // go DFU
    toUpdate() {
      this.ConnectBtnText = '连接头环';
      this.$dfu.downloadFile();
      this.$refs.updatePopup.close();
      // if (this.power < 15) {
      // 	this.$toast('头环电量大于15%后重试', {
      // 		duration: 3000
      // 	});
      // 	let t = setTimeout(() => {
      // 		app.closeBLEConnection()
      // 		this.$refs.updatePopup.close();
      // 		clearTimeout(t)
      // 	}, 3000)
      // } else {
      // 	this.ConnectBtnText = '连接头环';
      // 	this.$dfu.downloadFile();
      // 	this.$refs.updatePopup.close();
      // }
    },
    // 图表区域禁止 触发底层滚动
    moveHandle(e) {
      // console.log('moveHandle',e);
    },
    // 切换Tab Item
    changeItem(e) {
      // console.log('我是Tab');
      let item = e.detail.current;
      if (item == 0) {
        this.toDetection();
      } else if (item == 1) {
        this.toTrend();
        // 请求趋势数据
        this.getTrend();
        this.getUserInfo();
      }
    },
    // 监测页面  切换Tab
    toDetection() {
      this.swiperIndex = 0;
      // 恢复趋势数据
      this.trendData = [];
    },
    //数据说明页面
    toIntroductDetail: function () {
      uni.navigateTo({
        url: 'introductData/introductData'
      });
    },
    /**
     * 趋势-------------------------------------------------------
     */
    toTrend: function () {
      this.swiperIndex = 1;
      // 请求趋势数据
      // this.getTrend();
    },
    getTrend() {
      let that = this;
      let userId = this.userId;
      let data = {
        userId: userId,
        action: 'getTrend'
      };
      api.getTrend(data)
          .then(function (res) {
            console.log('getTrend success ', res);
            if (res.data.code == 2000) {
              if (res.data.data.trend.length == 0) {
                that.isHistoryData = false;
                that.$toast('您还没有检测', {
                  icon: 'error'
                });
                return;
              }
              that.isHistoryData = true;
              that.trendData = res.data.data.trend
              // 默认选择30日的数据
              that.SelectDate(30);
            }
          })
          .catch(function (error) {
            console.log(' getTrend fail', error);
          });
    },
    getChartIndex(e) {
      if (e.currentIndex.index != -1) this.getHistoryReport(this.choiceTrendData.reportId[e.currentIndex.index])
    },
    getHistoryReport(reportId) {
      let that = this;
      let data = {
        userId: this.$store.state.userInfo.currentUser.userId,
        params: {
          eqSearchKey: {
            reportId: [reportId]
          },
          orderDesc: 'createTime',
          currentPage: 1,
          pageSize: 1
        }
      };
      api.getHistoryReport(data).then(function (res) {
        console.log('请求历史数据 ', res);
        if (res.data.success) {
          let report = res.data.data.reportList[0]
          let ageAvg = (report.minVascularAge + report.maxVascularAge) / 2
          let userAge = that.$utils.getAge(that.$store.state.userBaseInfo.birthday);
          that.trendReport.bloodAge = ageAvg - userAge > 0 ? '+' + (ageAvg - userAge) : (ageAvg -
          userAge == 0 ? '±' + (ageAvg - userAge) : (ageAvg - userAge))
          that.trendReport.heartRate = report.heartBeat
          that.trendReport.bloodAdjust = report.adjustScore
          that.trendReport.bloodElasticity = report.hardScore
          that.trendReport.headhealth = report.brainHealthScore
        }
      }).catch(function (error) {
        console.log('get history Data fail', error);
      });
    },
    // 获取用户信息 取出病史
    getUserInfo() {
      let that = this;
      let userId = this.userId;
      let data = {
        userId: userId,
        action: 'getUserInfo'
      };
      //调用接口请求个人信息
      api.getUserInfo(data)
          .then(function (res) {
            // console.log('getUserInfo::', res);
            if (res.data.code == 2000) {
              let Info = res.data.data;
              that.getKeyWord(Info.stroke, Info.hypertension, Info.highBloodHyperglycemia, Info
                  .highBloodLipids, Info.heartDisease);
            }
          })
          .catch(function (error) {
            console.log('getUserInfo fail', error);
          });
    },
    // 提取病史关键词
    getKeyWord(isStroke, isHBPressure, isHyperglycemia, isHyperlipidemia, isHeartDisease) {
      let keyWord = '';
      if (isStroke) keyWord += '#中风史';
      if (isHBPressure) keyWord += '#高血压';
      if (isHyperglycemia) keyWord += '#高血糖';
      if (isHyperlipidemia) keyWord += '#高血脂';
      if (isHeartDisease) keyWord += '#心脏病';
      if (!isStroke && !isHBPressure && !isHyperglycemia && !isHyperlipidemia && !isHeartDisease) keyWord +=
          '#无病史';
      // 在此处获取一些建议
      this.getSuggest(keyWord);
    },
    /*  获取信息  整个页面的全部内容
     *---生活建议   饮食建议  早餐 午餐 晚餐 菜谱 运动建议 ~~具体运动~~ 药膳
     */
    getSuggest(keyWord) {
      console.log(keyWord);
      let that = this;
      let data = {
        userId: this.userId,
        action: 'getAdviceOnRecuperation',
        params: {
          keyList: [{
            channelName: '生活建议',
            type: 'contents',
            count: 1,
            keyWord: keyWord
          },
            {
              channelName: '饮食建议',
              type: 'contents',
              count: 1,
              keyWord: keyWord
            },
            {
              channelName: '早餐',
              type: 'images',
              count: 2,
              keyWord: keyWord
            },
            {
              channelName: '午餐',
              type: 'images',
              count: 4,
              keyWord: keyWord
            },
            {
              channelName: '晚餐',
              type: 'images',
              count: 3,
              keyWord: keyWord
            },
            {
              channelName: '菜谱',
              type: 'contents',
              count: 2,
              keyWord: keyWord
            },
            {
              channelName: '运动建议',
              type: 'contents',
              count: 1,
              keyWord: keyWord
            },
            {
              channelName: '运动详情',
              type: 'contents',
              count: 2,
              keyWord: keyWord
            },
            {
              channelName: '药膳',
              type: 'contents',
              count: 1,
              keyWord: keyWord
            }
          ]
        }
      };
      api.getAdviceOnRecuperation(data)
          .then(function (res) {
            console.log('getAdviceOlnRecuperation success', res);
            if (res.data.code == 2000) {
              that.lifeAdvice.description = res.data.data.生活建议[0].description;
              that.lifeAdvice.accessUrl = res.data.data.生活建议[0].accessUrl;

              that.dietAdvice.description = res.data.data.饮食建议[0].description;
              that.dietAdvice.accessUrl = res.data.data.饮食建议[0].accessUrl;

              that.sportAdvice.description = res.data.data.运动建议[0].description;
              that.sportAdvice.accessUrl = res.data.data.运动建议[0].accessUrl;
              // 早餐
              that.breakfast = res.data.data.早餐;
              that.lunch = res.data.data.午餐;
              that.dinner = res.data.data.晚餐;
              // 药膳
              that.tonicDiet.title = res.data.data.药膳[0].title;
              that.tonicDiet.accessUrl = res.data.data.药膳[0].accessUrl;
              // 菜谱
              that.menu = res.data.data.菜谱;
              // 运动详情
              that.sportDetail = res.data.data.运动详情;
            }
          })
          .catch(function (error) {
            console.log('getAdviceOnRecuperation fail', error);
          });
    },
    // 生活建议
    toLifeDetail() {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.lifeAdvice.accessUrl
      });
    },
    //饮食建议
    toDietDetail() {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.dietAdvice.accessUrl
      });
    },
    // 菜谱
    toMenuDetail(index) {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.menu[index].accessUrl
      });
    },
    // 运动建议
    toSportDetail() {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.sportAdvice.accessUrl
      });
    },
    // 运动详情 详细
    toSportCardDetail(index) {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.sportDetail[index].accessUrl
      });
    },
    // 药膳
    toTonicDietDetail() {
      let that = this;
      uni.navigateTo({
        url: '../square/contentDetail/contentDetail?url=' + that.tonicDiet.accessUrl
      });
    },
    /*
     * 选择日期范围  :计算 当前日期前几天的 数据筛选
     */
    SelectDate: function (days) {
      this.extractParameter(days);
      // 选择日期的数据
      switch (days) {
        case 7:
          this.changeBgColor();
          this.selectDateBtnBg1 = '#e5e5e5';
          break;
        case 15:
          this.changeBgColor();
          this.selectDateBtnBg2 = '#e5e5e5';
          break;
        case 30:
          this.changeBgColor();
          this.selectDateBtnBg3 = '#e5e5e5';
          break;
        case 60:
          this.changeBgColor();
          this.selectDateBtnBg4 = '#e5e5e5';
          break;
      }
      this.$forceUpdate();
    },
    // 赋值给图表 提取参数（次数、极值、平均值）
    extractParameter(days) {
      let choiceData = {
        Score: [],
        Time: [],
        reportId: []
      };
      let trend = JSON.parse(JSON.stringify(this.trendData))
      trend.forEach((item, index) => {
        if (util.Dayz(item.createTime.slice(0, 10)) <= days) {
          choiceData.Score.push(item.synScore);
          choiceData.Time.push(item.createTime.slice(5, 16));
          choiceData.reportId.push(item.reportId);
        }
      });
      this.choiceTrendData = choiceData
      // 绘图
      this.chartData.categories = choiceData.Time;
      this.chartData.series[0].data = choiceData.Score;
      if (choiceData.Time.length == 0) {
        this.healthyCount = 0;
        this.$forceUpdate();
        return;
      }
      this.healthyCount = choiceData.Score.length;
      // 刷新页面内容
      this.$forceUpdate();
    },
    //更改日期按钮背景颜色 全部初始化
    changeBgColor: function () {
      this.selectDateBtnBg1 = '';
      this.selectDateBtnBg2 = '';
      this.selectDateBtnBg3 = '';
      this.selectDateBtnBg4 = '';
    }
  }
};
</script>

<style>
@import url('../style/suggestStyle.css');

page {
  background-color: #f5f5f5;
  width: 750rpx;
  height: 100%;
}

.test {
  width: 700rpx;
  height: 500rpx;
  background-color: #07c160;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100%;
}

.flex-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-c-reverse {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

.NetState {
  position: absolute;
  top: 35rpx;
  z-index: 900;
  width: 686rpx;
  height: 48rpx;
}

.TabView {
  /* margin-top: 50rpx; */
  margin-top: calc(var(--status-bar-height) + 20rpx);
  margin-left: 34rpx;
  width: 290rpx;
  align-self: flex-start;
  display: flex;
  align-items: center;
}

.TabView_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  margin-right: 40rpx;
}

.TabsLine1 {
  width: 62rpx;
  height: 10rpx;
  background: #0659c7;
  border-radius: 15px;
  margin-top: 24rpx;
  animation: lineStyle1 .3s linear 1;
}

@keyframes lineStyle1 {
  0% {
    width: 0rpx;
  }

  50% {
    width: 30rpx;
  }

  100% {
    width: 62rpx;
  }
}

.TabsLine2 {
  width: 0;
  height: 10rpx;
  background: #0659c7;
  border-radius: 15px;
  margin-top: 24rpx;
  animation: lineStyle2 .3s linear 1;
}

@keyframes lineStyle2 {
  0% {
    width: 62rpx;
  }

  50% {
    width: 30rpx;
  }

  100% {
    width: 0rpx;
  }
}

.swiperView {
  width: 750rpx;
  height: 100%;
}

/* 监测页  自底向上布局 */
.detectionPage {
  position: relative;
}

.titleStyle {
  font-size: 44rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #333333;
}

.Title1 {
  font-family: Source Han Sans SC;
  font-weight: bold;
  line-height: 27px;
  color: #0659c7;
  font-size: 54rpx;
  animation: fontStyle1 .3s linear 1;
}

@keyframes fontStyle1 {
  0% {
    font-size: 44rpx;
  }

  50% {
    font-size: 50rpx;
  }

  100% {
    font-size: 54rpx;
  }
}

.Title2 {
  font-family: Source Han Sans SC;
  font-weight: bold;
  line-height: 27px;
  color: #333333;
  font-size: 44rpx;
  animation: fontStyle2 .3s linear 1;
}

@keyframes fontStyle2 {
  0% {
    font-size: 54rpx;
  }

  50% {
    font-size: 50rpx;
  }

  100% {
    font-size: 44rpx;
  }
}

.HeadBandImgView {
  /* position: absolute;
top: 0; */
  width: 100%;
  height: calc(100% - 800rpx);
}

.HeadBandImg {
  /* width: 313rpx; */
  width: 40%;
  /* background-size: cover; */
  /* margin: 30rpx auto auto; */
}

.absoultView {
  /* position: absolute;
bottom: 0; */
}

.DisplayArea {
  width: 750rpx;
  margin: 43rpx auto auto;
}

.ConnectBtn {
  width: 326rpx;
  height: 78rpx;
  border-radius: 50px;
  background-color: #0659c7;
}

.ConnectBtn text {
  font-size: 44rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
}

.loading_dot {
}

.DisplayArea_btn {
  width: 484rpx;
  height: 100rpx;
  border-radius: 50px;
  background-color: #0659c7;
}

.ConnectBtn {
  width: 484rpx;
  height: 100rpx;
}

.StatusBar {
  width: 643rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.StatusBar_item {
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* 未佩戴的显示 */
.noAdorn {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.StatusBar_item_Des {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.power {
  font-size: 38rpx;
  font-family: Roboto;
  font-weight: bold;
  color: #333333;
}

/* 卡片区域 */
.cardView {
  width: 700px;
}

.card_img {
  width: 700rpx;
  height: 280rpxf;
  margin: 24rpx auto auto;
}

/* 趋势页样式 */
.TendArea {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chartArea {
  margin-top: 20rpx;
  background-color: #ffffff;
  width: 100vw;
}

.selectDateView {
  width: 702rpx;
  margin-top: 38rpx;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.selectDateBtn {
  width: 170rpx;
  height: 60rpx;
  border-radius: 15px;

  font-size: 32rpx;
  font-family: Roboto;
  font-weight: normal;
  color: #000000;
}

/* 图表区域样式 */
.charts-box {
  width: 100%;
  height: 300px;
}

/* 小卡片区域 */
.reportDataView {
  position: relative;
  margin: 45rpx auto 50rpx;
  width: 700rpx;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  padding: 20rpx 0;
}

.reportDataViewImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 202rpx;
}

.reportDataView .line {
  margin: 20rpx;
  width: 652rpx;
  height: 2rpx;
  background-color: #DCDCDC;
}

.reportDataView_T {
  width: 650rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reportData_top {
  /* display: flex;
  align-items: flex-end; */
}

.reportData_top text:nth-child(1) {
  font-size: 25rpx;
  color: #000000;
}

.reportData_top text:nth-child(2) {
  display: inline-block;
  margin: 0 5rpx 0 15rpx;
  font-size: 40rpx;
  font-style: italic;
  font-weight: bold;
  color: #000000;
}

.reportData_top text:nth-child(3) {
  font-size: 23rpx;
  color: #000000;
}

.reportDataItem {
}

.reportDataItem_name {
  font-size: 26rpx;
  font-weight: bold;
  color: #000000;
}

.reportDataItem_des {
  margin-top: 20rpx;
  width: 135rpx;
  height: 94rpx;
  background-color: #F7F7F7;
  border-radius: 15rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

.ml28 {
  margin-left: 28rpx;
}

.mt28 {
  margin-top: 28rpx;
}

.mt45 {
  margin-top: 45rpx;
}

/* 生活  饮食 等建议 */
.LifeAdvice {
  width: 703rpx;
  height: 334rpx;
  border-radius: 15px;
  background-color: #ffffff;
}

.tipView {
  margin-top: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tipLine {
  width: 10rpx;
  height: 35rpx;
  background-color: #fbad15;
  border-radius: 15px;
}

.LifeAdvice_title {
  font-size: 40rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000000;
}

.LifeAdvice_content {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #333333;
}

.updateImg {
  width: 530rpx;
}

.dfu_button {
  margin-bottom: 30rpx;
  width: 400rpx;
  height: 80rpx;
  border-radius: 50px;
  background-color: #0659c7;
  color: white;
}

/* 弹出层  */
.popup_input_view {
  width: 620rpx;
  height: 500rpx;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.dfuPopup {
  width: 530rpx;
  height: 660rpx;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.dfu_des {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.popup1 {
  width: 620rpx;
  height: 750rpx;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.icon_content {
  margin-top: 93rpx;
  width: 238rpx;
  height: 238rpx;
}

.popup1Content {
  margin-top: 20rpx;
  font-size: 52rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #333333;
}

.icon_close {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 26rpx;
  right: 35rpx;
}

.popupBottomView {
  margin-bottom: 0rpx;
  width: 100%;
  height: 120rpx;
  border-radius: 0 0 15px 15px;
  background-color: #0659c7;
}

.popupBottomView text {
  font-size: 44rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #ffffff;
}
</style>